<template>
  <div>
    <MainNavBar>
      <template #center-name> 我的证书{{num}} </template>
    </MainNavBar>
    <div class="wrapper"  v-show="!isLoading">
      <div v-if="is_certificate" class="content_C"></div>
    <div v-else  class="content_C">
      <div class="certigicate">
        <van-swipe @change="onChange" ref="swiper">
          <van-swipe-item class="getimg" v-for="(item,index) in CertifiList" :key="index" >
            <div class="img_name center_img">
                <img class="img_a" src="../../assets/images/certificate.png" alt="" />
            <div class="name">
                <div class="user_grade_a">{{item.cert}}</div>
                <div class="user_anme">{{item.sign_name}}</div>
                <div v-if="item.sex==0" class="user_six">男</div>
                <div v-if="item.sex==1"  class="user_six">女</div>
                <div class="user_birthday">{{getTime(String(item.birthday))}}</div>
                <div class="user_data">{{getTime(String(item.result_end_time))}}</div>
                <div class="user_fraction">{{item.average}}</div>
                <div class="user_grade_b">{{item.level}}</div>
                <div class="user_grade_c">{{item.cert}}</div>
                <div class="user_grade_d">{{item.level}}</div>
                <div class="user_grade_e">{{item.ecert}}</div>
            </div>
            </div>
            
            <div v-if="!is_certificate" class="img_name_a"><img class="img_a" @click="Preview(index)" :src="imgmap[index]" alt=""></div>
            <div class="bgcimg">
                <img class="img_b" src="../../assets/images/certificate.png" alt="" />
                <img class="img_c" src="../../assets/images/certificate.png" alt=""/>
            </div>  
            </van-swipe-item>
          <template #indicator>
            <!-- <div class="custom-indicator"></div> -->
          </template>
        </van-swipe>
      </div>
      <div class="cate_bot">
        <div class="cate_bot_l">
          <div class="num">
            <span>{{ current + 1 }}</span
            >/{{photo_num}}
          </div>
          <div class="num_li"></div>
        </div>
        <div class="cate_bot_r" @click="getNext()" v-if="photo_num > 1">
          <div>下一张</div>
          <div><img src="http://qnticao.laigl.com/vue/arrow.png" alt="" /></div>
        </div>
      </div>
      <div class="download"   @click="downlodeImg">
        <img src="http://qnticao.laigl.com/vue/file.png" alt="" />
        <div>长按证书保存到本地</div>
      </div>
      
    </div>
   <div class="loading" v-if="isload && !is_certificate"></div>
   <van-loading  v-show="isload && !is_certificate" style="position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0)" size="24px" color="#fff"  text-color="#fff" vertical>正在加载中，请稍后...</van-loading>
  </div>
    <!-- <div class="loading2" v-show="isLoading"><img src="../../assets/images/loading.gif" alt=""></div> -->
    <div class="loading2" v-show="isLoading">
       <van-loading  style="position:fixed;left:50%;top:50%;transform:translate3d(-50%,-50%,0)" size="24px" color="#fff"  text-color="#fff" vertical>正在加载中，请稍后...</van-loading>
      </div>
  </div>
  
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import {request} from "../../network/request"
// import {downloadImage}
import { Toast ,ImagePreview } from 'vant';
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      photo_num: 1,
      index: 1,
      current: 0,
      CertifiList:[],
      imgmap:[],
      is_certificate:false,
      isload:true,
      isLoading:true,
    };
  },
  mounted() {
    this.getCertifiList()
  },
  methods: {
    Preview (index){
       ImagePreview({
         images:this.imgmap,
         startPosition:index
       })
    },
    onChange(index) {
      this.current = index;
      this.goNext(index) 
    },
    addLi() {
      let ul = document.querySelector(".num_li");
      console.log(this.photo_num);
      for (let i = 0; i < this.photo_num; i++) {
        let li = document.createElement("li");
        li.style.width = "1.333vw";
        li.style.height = "1.333vw";
        li.style.borderRadius = "0.667vw";
        li.style.width = "1.333vw";
        li.style.listStyle = "none";
        li.style.backgroundColor = "#8BB1D7";
        li.style.marginRight = "1.333vw";
        ul.appendChild(li);
      }
      ul.children[0].style.backgroundColor = "#fff";
    },
    getNext(){
          this.$refs.swiper.next();
    },
    goNext(index) {
    //   this.index = this.index + 1;
      this.index = index;
      if (this.index > this.photo_num) {
        this.index = 1;
      }
      let active = document.querySelector(".num_li");
      let li = document.querySelector("li");
      li.style.backgroundColor = "#80A9D2";
      let first_li = active.children[0];
      first_li.style.backgroundColor = "#80A9D2";
      active.children[index].style.backgroundColor = "#fff";
      for (let j = 1; j < this.photo_num; j++) {
        if (j != index) {
          let active_li_a = active.children[j];
          active_li_a.style.backgroundColor = "#80A9D2";
        }
      }
    },
    getTime (value) {
        // let date = new Date(value);
        // let y = date.getFullYear();
        // let MM = date.getMonth() + 1;
        // MM = MM < 10 ? ('0' + MM) : MM;
        // let d = date.getDate();
        // d = d < 10 ? ('0' + d) : d;
        // let h = date.getHours();
        // h = h < 10 ? ('0' + h) : h;
        // let m = date.getMinutes();
        // m = m < 10 ? ('0' + m) : m;
        // let s = date.getSeconds();
        // s = s < 10 ? ('0' + s) : s;19980510
        let y = value.substring(0,4)
        let MM = value.substring(5,7)
        let d = value.substring(8)
        return y + '年' + MM + '月' + d + '日';
      },
    async getCertifiList() {
      try {
        const res = await request({
          url: "/v1/ucenter/certificate_list",
          data: {
            token: sessionStorage.getItem('token'),
          },
        });
        if (res.code == 2000) {
          this.photo_num=1
          this.isLoading = false
           this.CertifiList = res.data;
           this.photo_num = res.data.length
           this.addLi();
          this.$nextTick(()=>{
            for(let i = 0;i < this.photo_num;i++){
              this.downlodeImg(i)
            }
          })
        } else {
          this.isLoading = false
          Toast(res.msg);
          this.is_certificate = true
        }
      } catch (error) {}
    },
    downlodeImg(index){
    // console.log(document.getElementsByClassName('img_name')[this.current]);
    //     return
    // 获取当前显示的证书
      html2canvas(document.getElementsByClassName('center_img')[index]).then(canvas => {
        //导出
        let i =0;
       let timer =  setInterval(() => {
         if(i==2){
           this.isload = false
           clearInterval(timer)
         }
          i++;
        }, 500);
    this.imgmap.push(canvas.toDataURL())
    
    return
    console.log(999, this.imgmap)
    if (window.navigator.msSaveOrOpenBlob) {
        console.log(123);
     var bstr = atob(this.imgmap.split(',')[1])
     var n = bstr.length
     var u8arr = new Uint8Array(n)
     while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
     }
     var blob = new Blob([u8arr])
     window.navigator.msSaveOrOpenBlob(blob, '体操证书' + '.' + 'png')
    } else {
        console.log(456);
     // 这里就按照chrome等新版浏览器来处理
     const a = document.createElement('a')
     a.href = this.imgmap
     a.setAttribute('download', '体操证书')
    //  a.setAttribute('download', 'chart-download')
     a.click()
    }
   });

        // Toast("等待完善")
    }
  },
  components: {
    MainNavBar,
  },
};
</script>

<style lang="less" scoped>
.loading{
  position: fixed;
  z-index: 5;
  bottom:0;
  left: 0;
  right: 0;
  width: 100vw;
  height: calc(100vh - 13.333vw);
  background-color: rgba(0,0,0,0.2);
  // background-color: rgba(255,255,255,0.2);

}
.img_name_a{
  position: relative;
  top: -117.333vw;
  .img_a {
    height: 118.933vw;
    width: 84vw;
    position: absolute;
    z-index: 3;
  }
}
.center_img{
  position: absolute;
  top: -100vh;
}
.van-swipe-item,.van-swipe__track{
    height: 120vw;
}
.bgcimg{
    position: relative;
    height: 82vw;
    top: -119vw;
    .img_b {
    width: 81.333vw;
    height: 115.157vw;
    position: absolute;
    right: 1.667vw;
    top: 1.888vw;
    z-index: 2;
    opacity: 0.3;
  }
  .img_c {
    height: 112.893vw;
    width: 79.733vw;
    position: absolute;
    right: -0.667vw;
    top: 3.02vw;
    z-index: 1;
    opacity: 0.17;
  }
}
.certigicate {
  width: 90vw;
  // height: 118.933vw;
  margin: 0 5vw 0 5vw;
  margin-top: 3.467vw;
  position: relative;
  .center_img.img_name{
      height:118.933vw;
      width: 84vw;
      position: relative;
      .name{
          position: absolute;
          z-index: 4;
          font-size: 3.2vw;
          font-family: '宋体',Arial, Helvetica, sans-serif;
         .user_grade_a{
             position: absolute;
             text-align: center;
             top: 34.8vw;
             left: 30.667vw;
             width: 21.333vw;
             height: 4.8vw;
             line-height: 4.8vw;
             color: #fff;
            transform: scale(0.8);
          }
          .user_anme{
            position: absolute;
            text-align: center;
            top: 44vw;
            left: 35.467vw;
            width: 21.333vw;
            height: 4.267vw;
            line-height: 4.267vw;
            transform: scale(0.7);
          }
          .user_six{
            position: absolute;
            text-align: center;
            top: 50.133vw;
            left: 35.467vw;
            width: 21.333vw;
             height: 4.267vw;
            line-height: 4.267vw;
            transform: scale(0.7);
          }
          .user_birthday{
            position: absolute;
            text-align: center;
            top: 56.267vw;
            left: 29.467vw;
            width: 33.333vw;
             height: 4.267vw;
            line-height: 4.267vw;
            transform: scale(0.7);
          }
          .user_data{
            position: absolute;
            text-align: center;
            top: 62.4vw;
            left: 29.467vw;
            width: 33.333vw;
             height: 4.267vw;
            line-height: 4.267vw;
            transform: scale(0.7);
          }
          .user_fraction{
            position: absolute;
            text-align: center;
            top: 69.067vw;
            left: 35.467vw;
            width: 21.333vw;
            transform: scale(0.7);
          }
          .user_grade_b{
            position: absolute;
            text-align: center;
            top: 76.534vw;
            left: 8vw;
            width: 21.333vw;
            transform: scale(0.65);
          }
          .user_grade_c{
            position: absolute;
            text-align: center;
            top: 76.534vw;
            left: 39vw;
            width: 21.333vw;
            transform: scale(0.4);
          }
          .user_grade_d{
            position: absolute;
            text-align: center;
            top: 80vw;
            left: 44.3vw;
            width: 21.333vw;
            transform: scale(0.65);
          }
          .user_grade_e{
            position: absolute;
            text-align: center;
            top: 83vw;
            left: 35vw;
            width: 21.333vw;
            transform: scale(0.65);
          }
      }
      .img_a {
    height: 118.933vw;
    width: 84vw;
    position: absolute;
    z-index: 3;
  }
//   背景图片
  }
}
.cate_bot {
  display: flex;
  justify-content: space-between;
  width: 84vw;
  margin: 0 9.867vw 0 6.133vw;
//   margin: 125vw 9.867vw 0 6.133vw;
  .cate_bot_l {
    display: flex;
    flex: 1;
    font-size: 4.8vw;
    height: 6.667vw;
    line-height: 6.667vw;
    color: #8cb2d7;
    .num {
      margin-right: 2.667vw;
      span {
        display: inline-block;
        width: 5.867vw;
        text-align: right;
        color: #fff;
      }
    }
    .num_li {
      display: flex;
      align-items: center;
      .active {
        background-color: #fff;
      }
    }
  }
  .cate_bot_r {
    display: flex;
    color: #fff;
    height: 6.667vw;
    line-height: 6.667vw;
    img {
      width: 4.267vw;
      height: 4.267vw;
      margin-left: 1.6vw;
    }
  }
}
.download {
  // width: 40vw;
  height: 8vw;
  line-height: 8vw;
  margin: 0 auto;
  margin-top: 5.333vw;
  display: flex;
  font-size: 4.8vw;
  color: #fff;
  letter-spacing: 0.267vw;
  justify-content: center;
  img {
    width: 6.667vw;
    height: 6.667vw;
    margin-right: 1.333vw;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  .van-swipe-item {
    background-color: #fff;
    height: 100%;
  }
}
.loading2{
  height:calc(100vh - 13.333vw);
  width: 100vw;
  background-color: #0054a6;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>